$(function () {
  carousel('caro1', 'slide', 3000);
  $('#vticker1').vTicker({
    speed: 500,     //滚动速度，单位毫秒。
    pause: 2000,        //暂停时间，就是滚动一条之后停留的时间，单位毫秒。
    showItems: 8,      //显示内容的条数。
    animation: 'fade',  //动画效果，默认是fade，淡出。
    mousePause: true,   //鼠标移动到内容上是否暂停滚动，默认为true。
    height: 447,        //滚动内容的高度。
    direction: 'up',     //滚动的方向，默认为up向上，down则为向下滚动。
  });

  $('#vticker2').vTicker({
    speed: 500,     //滚动速度，单位毫秒。
    pause: 2000,        //暂停时间，就是滚动一条之后停留的时间，单位毫秒。
    showItems: 8,      //显示内容的条数。
    animation: 'fade',  //动画效果，默认是fade，淡出。
    mousePause: true,   //鼠标移动到内容上是否暂停滚动，默认为true。
    height: 447,        //滚动内容的高度。
    direction: 'up',     //滚动的方向，默认为up向上，down则为向下滚动。
  });

  $('#vticker3').vTicker({
    speed: 500,     //滚动速度，单位毫秒。
    pause: 2000,        //暂停时间，就是滚动一条之后停留的时间，单位毫秒。
    showItems: 4,      //显示内容的条数。
    animation: 'fade',  //动画效果，默认是fade，淡出。
    mousePause: true,   //鼠标移动到内容上是否暂停滚动，默认为true。
    height: 447,        //滚动内容的高度。
    direction: 'up',     //滚动的方向，默认为up向上，down则为向下滚动。
  });
  $('#vticker4').vTicker({
    speed: 500,     //滚动速度，单位毫秒。
    pause: 2000,        //暂停时间，就是滚动一条之后停留的时间，单位毫秒。
    showItems: 4,      //显示内容的条数。
    animation: 'fade',  //动画效果，默认是fade，淡出。
    mousePause: true,   //鼠标移动到内容上是否暂停滚动，默认为true。
    height: 447,        //滚动内容的高度。
    direction: 'up',     //滚动的方向，默认为up向上，down则为向下滚动。
  });
  $('#vticker5').vTicker({
    speed: 500,     //滚动速度，单位毫秒。
    pause: 2000,        //暂停时间，就是滚动一条之后停留的时间，单位毫秒。
    showItems: 4,      //显示内容的条数。
    animation: 'fade',  //动画效果，默认是fade，淡出。
    mousePause: true,   //鼠标移动到内容上是否暂停滚动，默认为true。
    height: 235,        //滚动内容的高度。
    direction: 'up',     //滚动的方向，默认为up向上，down则为向下滚动。
  });

  let n = 1;
  setInterval(function () {
    n = n % 3;
    $('.change-list ul li').eq(n).addClass('active').siblings().removeClass('active');
    $('.top-right .vticker-container').eq(n).animate({ right: '0px' });
    if (n === 0) {
      $('.top-right .vticker-container').eq(2).animate({ right: '1378px' });
    } else {
      $('.top-right .vticker-container').eq(n - 1).animate({ right: '1378px' });
    }
    $('.top-right .vticker-container').eq(n).siblings('.vticker-container').attr('style', 'right:-1378px');
    n++;
  }, 4000)
  initChart();
  function initChart() {
    var chart = echarts.init(document.getElementById('chart'));
    var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line'
        }
      },
      xAxis: {
        type: 'category',
        axisLabel: {
          color: "#fff"
        },
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9',
          '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21',
          '22', '23', '24', '25', '26']
      },
      grid: {
        left: '5%',
        right: '5%',
        top: '5%',
        bottom: '10%'
      },
      yAxis: {
        type: 'value',
        min: 38,
        max: 42,
        axisLabel: {
          color: "#fff"
        }
      },
      series: [
        {
          data: [39.10, 39.40, 39.60, 39.10, 40.10, 41.10, 39.67, 39.78, 39.89, 39.27, 39.56, 39.48, 40.10,
            40.16, 39.66, 39.85, 39.76, 39.35, 39.24, 39.86, 39.99, 39.98, 39.95, 40.20, 40.30, 39.89, 39.65, 39.45],
          type: 'line',
          markLine: {
            label: {
              show: true,
              fontSize: 14,
              color: '#de253b'
            },
            symbol: 'none',
            data: [
              {
                yAxis: 39.35,
                name: '下限',
                lineStyle: {
                  color: '#de253b',
                  width: 2,
                  type: 'solid'
                },
              },
              {
                yAxis: 39.85,
                name: '标准线',
                label: {
                  show: true,
                  color: 'green',
                  fontSize: 14
                },
                lineStyle: {
                  color: 'green',
                  width: 2,
                  type: 'solid'
                },
              },
              {
                yAxis: 40.35,
                name: '上限',
                lineStyle: {
                  color: '#de253b',
                  type: 'solid',
                  width: 2,
                },
              },
            ]
          },
          itemStyle: {
            color: '#00fcff'
          },
          lineStyle: {
            color: '#00fcff'
          }
        }
      ]
    };
    chart.setOption(option)
  }
  initChart2();
  function initChart2() {
    var chart = echarts.init(document.getElementById('chart2'));
    var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line'
        }
      },
      xAxis: {
        type: 'category',
        axisLabel: {
          color: "#fff"
        },
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9',
          '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21',
          '22', '23', '24', '25', '26']
      },
      grid: {
        left: '5%',
        right: '5%',
        top: '5%',
        bottom: '10%'
      },
      yAxis: {
        type: 'value',
        min: 5,
        max: 8,
        axisLabel: {
          color: "#fff"
        }
      },
      series: [
        {
          data: [6.4, 6.2, 6.8, 6.3, 6.1, 6.7, 6.2, 6.5, 6.4, 7.1, 7.2, 6.3, 6.9,
            6.7, 6.4, 6.3, 6.2, 7.1, 7.2, 7.3, 6.6, 6.7, 6.8, 6.9, 6.6, 6.5, 6.3, 6.4],
          type: 'line',
          markLine: {
            label: {
              show: true,
              fontSize: 14,
              color: '#de253b'
            },
            symbol: 'none',
            data: [
              {
                yAxis: 6,
                name: '下限',
                lineStyle: {
                  color: '#de253b',
                  width: 2,
                  type: 'solid'
                },
              },
              {
                yAxis: 6.5,
                name: '标准线',
                label: {
                  show: true,
                  color: 'green',
                  fontSize: 14
                },
                lineStyle: {
                  color: 'green',
                  width: 2,
                  type: 'solid'
                },
              },
              {
                yAxis: 7,
                name: '上限',
                lineStyle: {
                  color: '#de253b',
                  type: 'solid',
                  width: 2,
                },
              },
            ]
          },
          itemStyle: {
            color: '#00fcff'
          },
          lineStyle: {
            color: '#00fcff'
          }
        }
      ]
    };
    chart.setOption(option)
  }
});